<template>
    <div>
        <el-divider>该商品历史成交总金额：<span class="text-red">{{ money }}</span> 元，成交总数量：<span class="text-red">{{ num }}</span> 件</el-divider>
        <el-table :data="list" border style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="title" label="采购单位"></el-table-column>
            <el-table-column prop="num" label="采购数量" width="120" align="center"></el-table-column>
            <el-table-column prop="price" label="采购价格" width="120" align="center">
                <template slot-scope="scope">
                    <span class="text-yellow">￥{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="supplier" label="供应商"></el-table-column>
            <el-table-column prop="tradedate" label="成交日期" width="120"></el-table-column>
        </el-table>
        <div class="text-center mt-30">
            <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next"
                :total="total" hide-on-single-page>
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getSaleInfo } from "@/api/apis"
export default {
    name: "sales",
    data () {
        return {
            loading: true,
            money: 0,
            num: 0,
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
            }
        }
    },
    mounted () {
        this.total === 0 && this.getList();
    },
    methods: {
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getList() {
            let that = this;
            that.loading = true;
            getSaleInfo({
                goods_id: that.$route.params.id
            }).then(res => {
                if (res.code === 1) {
                    that.list = res.data.list.data
                    that.total = res.data.list.total
                    that.params.pagesize = Number(res.data.list.per_page)
                    that.params.lastPage = res.data.list.last_page
                    that.isEmpty = !that.list.length;
                    that.money = res.data.money;
                    that.num = res.data.num;
                } else {
                    that.$message.error(res.msg)
                }
            })
            that.loading = false;
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
    th {
        background-color: rgba(46, 48, 51, .05);
    }
}
</style>